<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.4-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/boot-nav.css">
    <script src="../lib/jquery-2.1.1.min.js"></script>
    <script src="../lib/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <script src="js/jquery.boot-nav.js"></script>
    <title>bn-index</title>
</head>
<body>
<div class="bn-nav-container">
    <nav class="bn-nav">
        <ul class="bn-ul">
            <li data-url="#" class="bn-li bn-has-children">
                <span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">一级菜单1</span>
                <ul class="bn-child-ul">
                    <li data-url="http://www.baidu.com"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单1</span></li>
                    <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单2</span></li>
                    <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单3</span></li>
                    <li data-url="#"  class="bn-li bn-has-children">
                        <span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单4</span>
                        <ul class="bn-child-ul">
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单1</span></li>
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单2</span></li>
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单3</span></li>
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单4</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li data-url="#" class="bn-li bn-has-children">
                <span class="bn-icon glyphicon glyphicon-ok"></span><span class="bn-label">一级菜单2</span>
                <ul class="bn-child-ul">
                    <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单1</span></li>
                    <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单2</span></li>
                    <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单3</span></li>
                    <li data-url="#"  class="bn-li bn-has-children">
                        <span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单4</span>
                        <ul class="bn-child-ul">
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单1</span></li>
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单2</span></li>
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单3</span></li>
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单4</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li data-url="#" class="bn-li"><span class="bn-icon glyphicon glyphicon-ok-circle"></span><span class="bn-label">一级菜单3</span></li>
            <li data-url="#" class="bn-li"><span class="bn-icon glyphicon glyphicon-ok-sign"></span><span class="bn-label">一级菜单4</span></li>
            <li data-url="#" class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">一级菜单5</span></li>
            <li data-url="#" class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">一级菜单6</span></li>
            <li data-url="#" class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">一级菜单7</span></li>
            <li data-url="#" class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">一级菜单8</span></li>
            <li data-url="#" class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">一级菜单9</span></li>
            <li data-url="#" class="bn-li bn-has-children">
                <span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">一级菜单10</span>
                <ul class="bn-child-ul">
                    <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单1</span></li>
                    <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单2</span></li>
                    <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单3</span></li>
                    <li data-url="#"  class="bn-li bn-has-children">
                        <span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">二级菜单4</span>
                        <ul class="bn-child-ul">
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单1</span></li>
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单2</span></li>
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单3</span></li>
                            <li data-url="#"  class="bn-li"><span class="bn-icon glyphicon glyphicon-plus"></span><span class="bn-label">三级菜单4</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

<div id="pageContainer" style="width:100%;height:100%;position:absolute;top:10px;left:210px;background-color:#afd9ee">

</div>
<script>
    $(function(){
        $('.bn-nav-container').bootNav({
            pageContainer:'#pageContainer',
            url:'data.json'
        });
    });
</script>
</body>
</html>